<template>
  <div class="words" :class="[isH5 ? 'words-H5' : '']">
      <i class="icon icon-words" title="快速回复" @click="toggleShow"></i>
      <main class="words-main" :class="[isH5 ? 'words-H5-main' : '']" v-show="show&&!isMute">
        <div class="words-main-content" ref="dialog">
          <header>
            <aside>
              <h1>{{$t('Words.常用语-快捷回复工具')}}</h1>
            </aside>
            <span v-if="isH5" class="close" @click="toggleShow">关闭</span>
          </header>
          <ul class="words-list">
            <li class="words-list-item" v-for="(item, index) in list" :key="index"  @click="select(item)">
              <label>{{item.value}}</label>
            </li>
          </ul>
        </div>
      </main>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, watchEffect, toRefs, watch, ref } from 'vue';
import { useI18nLocale  } from '../../../../../TUIPlugin/TUIi18n';
import { onClickOutside } from '@vueuse/core';

const Words = defineComponent({
  type: 'custom',
  props: {
    show: {
      type: Boolean,
      default: () => false,
    },
    isMute: {
      type: Boolean,
      default: () => false,
    },
    isH5: {
      type: Boolean,
      default: () => false,
    },
  },
  setup(props:any, ctx:any) {
    const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();
    const list:any = [
      {value: '好想有个人能陪陪啊，唉'},
      {value: '哥哥在干嘛呢？合适的话可以相处一下呀'},
      {value: '我们好像离的很近一起出去玩啊'},
      {value: '我们是直接领证，还是走流程？ '},
      {value: '我在等你，慢慢相遇'},
      {value: '想要成为你众所周知的欢喜'},
      {value: '想着你的感觉，心中甜甜的'},
      {value: '爱情也许会迟到，但不会缺席'},
      {value: '我有话想对你说'},
      {value: '想和你今年 明年 年年'},
      {value: '嗨~可以跟我分享一些最近的开心事吗？'},
      {value: '遇到你，我的全世界都亮了'},
      {value: '理想型的标准答案，是见到你的那一刻才有的'},
      {value: '对的时间，对的地点，你会是对的人吗？'},
      {value: '晴天 阴天 都不如和你聊天'},
      {value: '长得好看和对你好的你会选择哪一个？'},
      {value: '---------------------------------------------------------'},
      {value: '看全生吗 ↑还是↓呢'},
      {value: '我很色的，敢聊聊吧'},
      {value: '今天晚上来找我 没开玩笑'},
      {value: '你喜欢主动还是被动'},
      {value: '你喜欢在上还是在下，我喜欢在你的身下'},
      {value: '聊点刺激的？'},
      {value: '男人的嘴是干什么'},
      {value: '你我玩两次'},
      {value: '哥哥 想不想玩玩'},
      {value: '欲望很大'},
      {value: '好想做操'},
      {value: '妹妹口渴了，想喝哥哥的豆浆'},
      {value: '下面看吗'},
      {value: '视频吗哥哥，你想看的我都有'},
      {value: '哥哥喜欢什么姿势，来探讨一下'},
      {value: '冬天怕你冷到睡不着，一心只想给你暖被窝'},
      {value: '我最喜欢的生活是，睡前和睡醒第一次看到的人都是你'},
      {value: '想要给你最好的生活，让你的压力不要那么大，能把你压得喘不过气的，只能是我。'},
      {value: '失眠和熬夜都只是因为你没有在我身边，你在的日子没有睡不着这回事	'},
      {value: '想要你和我分享你的所有，枕边话的那种'},
      {value: '即使可以选择的人有很多，但只有你，才是我最想要的。'},
      {value: '不是我喜欢的样子你都有，而是你所有的样子我都喜欢'},
    ];
    const data = reactive({
      list: [],
      show: false,
      isMute: false,
      locale: useI18nLocale(),
    });

    const dialog:any = ref();

    watch(() => data.locale, (newVal:any, oldVal:any) => {
      data.list = list.map((item:any) => ({
        value: t(`Words.${item.value}`),
      }));
    });

    watchEffect(() => {
      data.show = props.show;
      data.isMute = props.isMute;
    });

    const toggleShow = () => {
      data.show = !data.show;
      if (data.show) {
        data.list = list.map((item:any) => ({
          value: t(`Words.${item.value}`),
        }));
      }
    };

    onClickOutside(dialog, () => {
      data.show = false;
    });

    const select = (item:any, index?:number) => {
      const text = item.value;
      toggleShow();
      Words.TUIServer.sendTextMessage(text);
    };
    return {
      ...toRefs(data),
      toggleShow,
      select,
      dialog,
    };
  },
});
export default Words;
</script>
<style lang="scss" scoped src="./style/index.scss"></style>
